<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #000;
			}
			#myCanvas{
				position: absolute;
				z-index: -1;
			}
			input[type="range"]{
				width: 400px;
			}
			.ui{
				display: none;
				color: #fff;
			}
			.inline{
				display: flex;
				height: 60px;
				align-items: center;
			}
			.txt{
				margin-right: 20px;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="800" height="800"></canvas>
		<div class="ui">
			<div class="inline">
				<div class="txt">振幅</div>
				<input type="range" id="swing" value="50" min="0" max="1000" />
			</div>
			<div class="inline">
				<div class="txt">频率</div>
				<input type="range" id="freq" value="10" min="0" max="60" />
			</div>
		</div>
		<script type="text/javascript" src="tCanvas.js"></script>
		<script type="text/javascript">
			var pDemo = new Particle({
				mode: 3,
				mode3(){
					// 创建粒子
					for(var i = 0; i < 100; i++){
						for(var j = 0; j < 6; j++){
							this.pList.push({
								ver: [
									[(j - 3) * 200, 0, -i * 200],
									[(j - 3) * 200 + 160, 0, -i * 200],
									[(j - 3) * 200 + 160, 0, -i * 200 - 160],
									[(j - 3) * 200, 0, -i * 200 - 160],
								]
								
							})
						}
					}
					// 绘制
					this.cx.fillStyle = "#fff"
					this.draw(()=>{
						this.cx.save()
						this.cx.clearRect(0, 0, this.mainWidth, this.mainHeight)
						this.cx.translate(this.mainWidth / 2, this.mainHeight / 2)
						this.pList.forEach(p => {
							this.cx.save()
							var currVer = []
							p.ver.forEach(v=>{
								currVer.push(this.deDiv(v))
							})
							this.cx.beginPath()
							this.cx.moveTo(currVer[0].res[0] * currVer[0].multi, currVer[0].res[1] * currVer[0].multi)
							this.cx.lineTo(currVer[1].res[0] * currVer[1].multi, currVer[1].res[1] * currVer[1].multi)
							this.cx.lineTo(currVer[2].res[0] * currVer[2].multi, currVer[2].res[1] * currVer[2].multi)
							this.cx.lineTo(currVer[3].res[0] * currVer[3].multi, currVer[3].res[1] * currVer[3].multi)
							this.cx.closePath()
							this.cx.fill()
							this.cx.restore()
						})
						this.cx.restore()
					})
				}
			})
			swing.oninput = function(){
				pDemo.swing = this.value
			}
			freq.oninput = function(){
				pDemo.freq = this.value / 10
			}
		</script>
	</body>
</html>
